<template>
  <div
    style="margin-top: 30px; margin-bottom: 30px"
    class="custom-iframe-container"
    :style="{ backgroundColor: modelValue?.bgColor }"
    @mouseenter="isHover = true"
    @mouseleave="isHover = false"
  >
    <div class="custom-iframe">
      <div :class="[widthClass]">
        <iframe
          width="450"
          :height="modelValue?.height"
          frameborder="0"
          :src="modelValue?.url"
          allow=""
          style="border: 0"
        ></iframe>
      </div>
    </div>
    <Operate
      v-if="!isPreview"
      v-model:show="isHover"
      @handle-edit="showSetting = true"
      @handle-delete="handleDelete"
      @handle-copy="handleCopy"
      @handle-paste="handlePaste"
    ></Operate>
    <!-- </a-row> -->
  </div>

  <Setting v-if="!isPreview" v-model:show="showSetting" :data="modelValue"></Setting>
</template>

<script lang="ts" setup>
import { computed, nextTick, ref } from "vue";
import { randomString } from "@/utils/common";
import Setting from "./setting.vue";
import Operate from "@/common/Operate/index.vue";

// 定义组件名称
defineOptions({
  name: "CustomIframe",
});

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {},
  },

  // 是否预览
  isPreview: {
    type: Boolean,
    default: true,
  },
});
console.log("!!!!", props.modelValue);
const emit = defineEmits([
  "update:modelValue",
  "handleDelete",
  "handleCopy",
  "handlePaste",
]);

const isHover = ref<boolean>(false);
const showSetting = ref<boolean>(false);
const timeObj = ref({
  day: 0,
  hour: 0,
  min: 0,
  sec: 0,
});
// const timer = null;
const timer = ref(null);

const widthClass = computed(() => {
  const w = props.modelValue?.width as string | undefined;
  if (!w || w === "default") return "container-content";
  if (w.startsWith("container-content-")) return w;
  const map: Record<string, string> = {
    small: "acontainer-content-small",
    middle: "acontainer-content-middle",
    medium: "acontainer-content-middle",
    max: "acontainer-content-max",
  };
  return map[w] || "container-content";
});

const handleDelete = () => {
  emit("handleDelete", props.modelValue.id);
};

const handleCopy = () => {
  emit("handleCopy", props.modelValue);
};

const handlePaste = (type: string) => {
  emit("handlePaste", type);
};

const handleInit = () => {
  if (props.modelValue && props.modelValue.url) return; // 检查必要属性是否存在
  const data = {
    id: props.modelValue?.id || randomString(),
    type: "CustomIframe",
    width: "",
    height: 550,
    url: "https://www.baidu.com",
  };
  emit("update:modelValue", data);
};

handleInit();
</script>

<style scoped lang="scss">
.custom-iframe-container {
  position: relative;
}
.custom-iframe,
.custom-iframe iframe {
  width: 100%;
}

.custom-iframe .has-ratio {
  width: 100%;
  padding-bottom: 0;
  padding-bottom: var(--custom-ratio, 0);
  position: relative;
}

.custom-iframe .has-ratio iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.acontainer-content-small {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
}

.acontainer-content-middle {
  width: 100%;
  max-width: 992px;
  margin: 0 auto;
}

.acontainer-content-max {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
</style>
